<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/vue/vue.2.6.12.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="row" id="appMain">
			<div class="col-1">
				<div class="card m-10">
					<header>入门</header>
					<main>
						<com1></com1>
					</main>
				</div>
				<div class="card m-10">
					<header>内部数据</header>
					<main>
						<com2></com2>
					</main>
				</div>
				<div class="card m-10">
					<header>简单属性</header>
					<main>
						<com3 name="Tom" age="18" gender="男"></com3>
						<com3 name="Lucy" age="21" gender="女"></com3>
						<com3 name="Jack" age="22" gender="男"></com3>
					</main>
				</div>
				<div class="card m-10">
					<header>对象属性</header>
					<main>
						<com4 :user="item" :key="item.name" v-for="item in users"></com4>
					</main>
				</div>
				<div class="card m-10">
					<header>事件</header>
					<main>
						<com5 @changed="lightChanged"></com5>
						<span>{{lightText}}</span>
					</main>
				</div>
				<div class="card m-10">
					<header>双向绑定</header>
					<main>
						<com6></com6>
						<com6></com6>
						<com6></com6>
					</main>
				</div>
				<div class="card m-10">
					<header>插槽</header>
					<main>
						<com7 from-user="Tom" to-user="Jack">
							<div>you got a message!</div>
						</com7>
						<com7 from-user="Tom" to-user="Jack">
							<div>how are you going?</div>
						</com7>
					</main>
				</div>
			</div>
			<div class="col-1">
				<div class="card m-10">
					<header>单文件组件</header>
					<main>
						<menu-input></menu-input>
					</main>
				</div>
			</div>
			<div class="col-1"></div>
			<div class="col-1"></div>
		</div>
		<template id="tpl-mirror">
			<div>
				<div>
					<label>甲方: </label><input v-model="msg" />
				</div>
				<div>
					<label>已方: </label><input v-model="msg" />
				</div>
			</div>
		</template>

		<template id="tpl-menu">
			<div>
				<div>
					<input v-model="search" type="text" placeholder="要查询什么" @input="searching" />
				</div>
				<div class="pop-menu">
					<ul class="list">
						<li v-for="item in matched">{{item}}</li>
					</ul>
				</div>
			</div>
		</template>

		<script>
			Vue.component("com1", {
				template: `<h3>Hello, 简单组件</h3>`
			});
			Vue.component("com2", {
				data: function() {
					return {
						tonce: 1
					}
				},
				methods: {
					toss() {
						this.tonce = Math.floor(Math.random() * 6) + 1;
					}
				},
				template: `<div><p>当前骰子: {{tonce}}</p><button @click="toss">掷骰子</button></div>`
			});
			Vue.component("com3", {
				props: ["name", "age", "gender"],
				template: `<div>姓名:<b>{{name}}</b>年龄:<b>{{age}}</b>性别:<b>{{gender}}</b></div>`
			});
			Vue.component("com4", {
				props: ["user"],
				template: `<div>姓名:<b>{{user.name}}</b>年龄:<b>{{user.age}}</b>性别:<b>{{user.gender}}</b></div>`
			})
			Vue.component("com5", {
				data() {
					return {
						status: 0,
					}
				},
				template: '<button @click="toggle">{{text}}</button>',
				methods: {
					toggle() {
						this.status = this.status == 0 ? 1 : 0;
						this.$emit("changed", this.status);
					}
				},
				computed: {
					text() {
						return this.status == 0 ? "开灯" : "关灯";
					}
				}
			})
			Vue.component("com6", {
				data(){
					return {
						msg:""
					}
				},
				template: $("#tpl-mirror").html(),

			})
			Vue.component("com7", {
				props: ["fromUser", "toUser"],
				template: `<div><h5>Dear {{toUser}}</h5><slot></slot><hr/><small>Kindly {{fromUser}}</small></div>`,
			})

			var menuInput = {
				el: "#tpl-menu",
				data() {
					return {
						all: ["Apple", "Pear", "Orange", "Banana", "Cherry", "Walnut", "Pumpkin", "Strawberry", "Tomato", "Potato"],
						matched: [],
						search: "",
					};
				},
				methods: {
					searching() {
						this.matched.splice(0);
						let reg = new RegExp(this.search, "i");
						for (let i = 0; i < this.all.length; i++) {
							// if (this.all[i].search(this.search) != -1) {
							if (reg.test(this.all[i])) {
								this.matched.push(this.all[i]);
							}
						}
					}
				}
			}

			var appMain = new Vue({
				el: "#appMain",
				components: {
					menuInput,
				},
				data: {
					users: [{
						name: "孔子",
						age: 3000,
						gender: "男"
					}, {
						name: "鲁迅",
						age: 45,
						gender: "男"
					}, {
						name: "张爱玲",
						age: 38,
						gender: "女"
					}],
					lightText: "",
				},
				methods: {
					lightChanged(status) {
						this.lightText = status == 1 ? "来电了" : "关灯了";
					}
				}
			});
		</script>
	</body>
</html>
